<template>
    <div class="my-tab">
        <div class="my-tab-head">
            <slot name="head"></slot>
        </div>
        <div class="my-tab-foot">
            <slot name="foot"></slot>
        </div>
        <div class="tag" v-if="tag" :style="{backgroundColor:tag.bg||'#9c9c9c'}">
            {{tag.tag}}
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        props: ["tag"]
    }
</script>

<style scoped lang="scss">
    .my-tab {
        height: 280px;
        margin: 5px;
        position: relative;
        border: 1px solid #d6d6d6;
        overflow: hidden;

        .my-tab-head {
            width: 100%;
            background-color: #ffffff;
            padding: 0 15px;
            height: 210px;
            overflow-y: auto;
        }

        .my-tab-foot {
            background-color: #e8eeda;
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 70px;
        }

        .tag {
            position: absolute;
            color: #f5f5f5;
            font-weight: bolder;
            padding: 2px 30px;
            top: 15px;
            right: -30px;
            z-index: 2;
            transform: rotate(45deg);
        }
    }

    .tab-p {
        padding-top: 10px;

        h3 {
            min-height: 50px;
        }

        p {
            font-size: 12px;
            margin: 5px 0;
        }
    }
</style>